<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
</head>
<body>
<a href="{{ url('addTest') }}">
    <button>球队添加</button>
</a>
<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th>ID</th>
        <th>球队图片</th>
        <th>球队名称</th>
        <th>球队场数</th>
        <th>球队胜率</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    @foreach($res as $val)
    <tr>
        <td>{{ $val->id }}</td>
        <td>
            <img src="{{ $val->image }}" style="width: 50px;height: 50px">
        </td>
        <td>{{ $val->name }}</td>
        <td>{{ $val->number }}</td>
        <td>{{ $val->numberState }}</td>
        <td>
            <input type="button" value="删除" id="{{ $val->id }}" class="del">
        </td>
    </tr>
    @endforeach
    </tbody>
</table>
</body>
</html>
<script>
    $(document).ready( function () {
        $('#table_id_example').DataTable();
    } );
    $(".del").click(function () {
        let id = $(this).prop('id');
        let _this = $(this);
        let a = confirm('是否进行删除成功');
        if(a == true)
        {
            $.ajax({
                url:'del',
                data:{
                    id:id
                },
                type:'get',
                success:function (e) {
                    _this.parents('tr').remove();
                    alert('删除成功');
                    return false;
                }
            })
        }
    })
</script>
